<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">登录账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">登录类型</label>
                            <div class="layui-input-inline">
								<select name="loginType"></select>
                            </div>
                        </div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">操作状态</label>
							<div class="layui-input-inline">
								<select name="succeeded"></select>
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="data-table-query-filter">
								<i class="layui-icon layui-icon-search"></i>查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="data-table" lay-filter="data-table-filter"></table>
			</div>
		</div>

        <script type="text/html" id="toolbarLeftTpl">
			<button class="pear-btn pear-btn-primary pear-btn-md layui-hide" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md layui-hide" lay-event="batchDelete">
		        <i class="layui-icon layui-icon-delete"></i>删除
		    </button>
		</script>

		<script type="text/html" id="operationTpl">
			<button class="pear-btn pear-btn-xs pear-btn-primary" lay-event="detail" title="详情"><i class="layui-icon layui-icon-eye"></i></button>
			<button class="pear-btn pear-btn-xs pear-btn-primary layui-hide" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="pear-btn pear-btn-xs pear-btn-danger layui-hide" lay-event="delete" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
		</script>


		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','layer', 'admin', 'dict', 'vtlForm'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let layer = layui.layer;
				let admin = layui.admin;
				let dict = layui.dict;
				let vtlForm = layui.vtlForm;

				let cols = [[
                    { type: 'checkbox', hide: true },
                    { field: 'id', title: 'ID', width: 200, hide: true },
                    { field: 'username', title: '登录账号', width: 120 },
                    { field: 'loginType', title: '登录类型', width: 120, templet: function(d){
                        return dict.label('vtl_login_type', d.loginType, true);
                    }},
                    { field: 'ip', title: '登录IP', width: 120 },
                    { field: 'ipLocation', title: '登录地点' },
                    { field: 'browser', title: '浏览器', width: 120 },
                    { field: 'platform', title: '设备平台类型', width: 120 },
                    { field: 'operatingSystem', title: '操作系统' },
                    { field: 'succeeded', title: '操作状态', width: 100, templet: function(d){
                        return dict.label('vtl_succeeded', d.succeeded, true);
                    }},
                    { field: 'errorInfo', title: '错误消息', width: 120, hide: true },
                    { field: 'createByName', title: '创建者', width: 120, hide: true },
                    { field: 'createTime', title: '创建时间', width: 160, hide: false, templet: function (d) {
                        return layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'updateByName', title: '更新者', width: 120, hide: true },
                    { field: 'updateTime', title: '更新时间', width: 160, hide: true, templet: function (d) {
                        return layui.util.toDateString(d.updateTime, "yyyy-MM-dd HH:mm:ss");
                    }},
                    { field: 'operation', title: '操作', width: 160, fixed: 'right', templet: '#operationTpl' }
                ]]


				table.render({
					elem: '#data-table',
					url: '/vtl-log-login/page',
					request: {
                        pageName: 'current',
                        limitName: 'size'
                    },
					parseData: function(res) {
                        return {
                            "code": 0,
                            "msg": 'SUCCESS',
                            "count": res.total,
                            "data": res.records
                        };
                    },
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#toolbarLeftTpl',
					defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports']
				});

				table.on('toolbar(data-table-filter)', function(obj) {
					if (obj.event === 'add') {
						window.edit();
                    } else if (obj.event === 'batchDelete') {
                        window.batchDelete();
					} else if (obj.event === 'refresh') {
                        window.refresh(true);
                    }
				});

				table.on('tool(data-table-filter)', function(obj) {
				    let row = obj.data;
                    switch (obj.event) {
                        case 'detail':
                            window.detail(row.id);
                            break;
                        case 'edit':
                            window.edit(row.id);
                            break;
                        case 'delete':
                            window.delete(obj);
                            break;
                        case 'disabled':
                            window.setDisabledValue(obj);
                            break;
                        default:
                            break;
                    }
				});

				form.on('submit(data-table-query-filter)', function(data) {
					window.refresh(data.field);
					return false;
				});

				window.refresh = function(field = {}, deep = false) {
				    $.vtl.tableReloadData('data-table', field, deep);
				}

				window.edit = function(id) {
				    let url = 'edit.html' + ($.vtl.isBlank(id) ? '' : ('?id=' + id));
				    $.vtl.openLayer(url, { title: '编辑' });
                }

				window.delete = function(obj) {
                    layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
                        layer.close(index);
                        $.delete('/vtl-log-login/' + obj.data.id, function(result) {
                            if (result.code == 200) {
                                obj.del();
                            }
                        });
                    });
                }

				window.detail = function(id, title = '登录日志详情') {
					top.layui.admin.jump('vtl-log-login-' + id, title, 'views/monitor/loginLogDetail.html?&id=' + id)
				}

				window.init = function() {
				    vtlForm.initSelectByDict('form select[name=loginType]', 'vtl_login_type');
					vtlForm.initSelectByDict('form select[name=succeeded]', 'vtl_succeeded');
				}

				window.init();

			})
		</script>
	</body>
</html>
